<template>
  <div class="m-content">

      <p class="u-nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>添加商户</el-breadcrumb-item>
        </el-breadcrumb>
      </p>

    <div class="u-container" v-loading="is_loading">
      <el-form ref="form"  :model="form" :rules="rules" label-width="80px" style="width: 520px;">

        <el-form-item label="商户名称"  prop="uname">
          <el-input v-model="form.uname"></el-input>
        </el-form-item>


        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>

        <el-form-item label="商户邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
          <el-button  @click="resetForm('form')">重置</el-button>
        </el-form-item>


      </el-form>

    </div>

  </div>
</template>

<script>

  export default {
    name: 'm-content',
    data:function(){
      return {
        is_loading:false,
        baseurl:this.$moment.config.baseurl,
        form: {
          uname:'',
          email:'',
          mobile:''

        },
        rules: {
          uname: [
            { required: true, message: '请输入商户名称', trigger: 'blur' },
            ],
          mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
          ],
          email:[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
          ]
        }

      };
    },
    methods: {

      submitForm:function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

              var data={};

              if(this.uid!=''){
                data.uname=this.form.uname;
              }

              if(this.mobile!=''){
                data.email=this.form.email;
              }

              if(this.uname!=''){
                data.mobile=this.form.mobile;
              }
              this.is_loading=true

              this.$http.post(this.baseurl+'user/index/add' ,data,{credentials : true,emulateJSON:true}).then(function(res){


                this.is_loading=false

                  if(res.status==200){

                    if(res.body.code==200){

                      this.$notify({
                        title: '成功',
                        message: '添加商户成功！',
                        type: 'success'
                      });

                      this.$router.push({ path: '/index/userlist'})



                    }else{
                      this.$message({
                        message: res.body.message,
                        type: 'error'
                      });
                    }

                  }else {

                    this.$message({
                      message: '网络请求错误，请刷新后重试！',
                      type: 'error'
                    });
                  }


              });


          }
        });
      },

      //重置表
      resetForm:function(formName) {
        this.$refs[formName].resetFields();
      },
    },
    created: function () {

    },

  }
</script>


<style>

  .m-content{
    margin: 15px;

  }
  .el-select{
    width: 100%;
  }
  .u-container{
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.05);
  }
  .u-table{
    margin-top: 30px;
  }



</style>
